visualHUD.dragInterface = {
	offsets: [],
	setMode: function(mode){
		this.mode = mode;
		return this;
	},
	setDragHandle: function(resizeHandle){
		this.resizeHandle = resizeHandle;
		return this;
	},
	startDrawRect: function(event, element){
		this.currentElement = this.drawBox.clone().css({top: Math.round(this.mouse.y), left: Math.round(this.mouse.x)}).appendTo(visualHUD.application.hudElementsWrap);
		this.mode = 'drawRect';
	},
	drawRect: function(event, position, mouse){
		if(this.options.grid) {
			this.mouse.x -= this.mouse.x % this.options.grid;
			this.mouse.y -= this.mouse.y % this.options.grid;					
			mouse.x -= mouse.x % this.options.grid;
			mouse.y -= mouse.y % this.options.grid;						
		};
		
		var w = Math.abs(this.mouse.x - mouse.x);
		var h = Math.abs(this.mouse.y - mouse.y);
		
		var t = Math.min(this.mouse.y, mouse.y) - visualHUD.application.canvasPosition.top;
		var l = Math.min(this.mouse.x, mouse.x) - visualHUD.application.canvasPosition.left;
		
		if(t < 0){
			t = 0;
			h = this.mouse.y - visualHUD.application.canvasPosition.top;
		} else {
			h = mouse.y > visualHUD.application.canvasPosition.bottom ?visualHUD.application.canvasPosition.bottom - this.mouse.y : h;
		};
		
		if(l < 0){
			l = 0;
			w = this.mouse.x - visualHUD.application.canvasPosition.left;
		} else {
			w = mouse.x > visualHUD.application.canvasPosition.right ?visualHUD.application.canvasPosition.right - this.mouse.x : w;
		};

		if(this.options.grid) {
			l -= l % this.options.grid;
			t -= t % this.options.grid;					
		};
		
		var area = { width: w, height: h, top: Math.round(t), left: Math.round(l) }
		this.currentElement.css(area);
		
		return area;
	},
	drawRectDrop: function(){
		var dataObject = {
			'name': 'rectangleBox',
			'itemType': 'rect',
			'label': 'Rectangle box',
			'cssClass': 'lib-element-rect'
		};
		visualHUD.constructor.fn.createRect(dataObject, this.currentElement);
		this.currentElement.trigger('click');
		_data = this.currentElement.data('HUDItem');
	},
	startDragSelect: function(event, element){
		var _this = this;
		
		if(!this.rubberBox) {
			this.rubberBox = this.drawBox.clone().addClass('rubber-box').empty();
			
		};
		
		this.currentElement = this.rubberBox.css({top: Math.round(this.mouse.y), left: Math.round(this.mouse.x)}).appendTo(visualHUD.application.hudElementsWrap);		
		this.mode = 'dragSelect';
		
		var HUDElements = visualHUD.application.hudElementsWrap.find('div.hud-item');
		this.HUDElements = [];
		
		HUDElements.each(function(){
			var _element = $(this);
			var coordinates = _element.coordinates(true, false);
			
			_this.HUDElements.push({
				element: _element,
				coordinates: coordinates
			});
		});
		
	},
	dragSelect: function(event, position, mouse){
		var area = this.drawRect(event, position, mouse);
		
		area.right = area.left + area.width;
		area.bottom = area.top + area.height;
		
		var HUDItem, selectFN;
		for(var a = 0, b = this.HUDElements.length; a < b; a++){
			HUDItem = this.HUDElements[a];
			var _element = HUDItem.element;
			var coordinates = HUDItem.coordinates;
			
			//area.right > coordinates.left && area.left < coordinates.right && area.bottom> coordinates.top && area.top < coordinates.bottom 

			selectFN = area.right > coordinates.left && area.left < coordinates.right && area.bottom > coordinates.top && area.top < coordinates.bottom ? 'addClass' : 'removeClass';
			_element[selectFN]('selected');
		};
		
	},
	dragSelectDrop: function(){
		this.currentElement.width(0).height(0).remove();
		this.currentElement = null;
		visualHUD.application.hudElementsWrap.find('div.selected').each(function(){
			visualHUD.application.selectItem($(this), true);
		});
	},
	startResizeBox: function(event, element){
		this.mode = 'resizeBox';
		for(var a = 0, b = this.compass.length; a < b; a++){
			var i = this.resizeHandle.hasClass(this.compass[a]);
			if(i){
				this.resizeDirection = this.compass[a];
				break;
			}
		};		
	},
	resizeBox: function(event, position, mouse){
		
		if(this.options.grid) {
			mouse.x -= mouse.x % this.options.grid;
			mouse.y -= mouse.y % this.options.grid;						
		};
		
		var margin = true;
		var relative = true;
		var _position = this.currentElement.position();

		var t = _position.top;
		var l = _position.left;

		var w = this.currentElement.width();
		var h = this.currentElement.height();

		var b = _position.top + h;
		var r = _position.left + w;
		
		if(this.resizeDirection == 'n' || this.resizeDirection == 'ne' || this.resizeDirection == 'nw'){
			t = Math.max(mouse.y - visualHUD.application.canvasPosition.top, 0);
			h = Math.max(b - t, 1); // _position.left - mouse.x - visualHUD.application.canvasPosition.left;
			if(h == 1){
				t = b - h;
			};
			
		};
		if(this.resizeDirection == 'w' || this.resizeDirection == 'nw' || this.resizeDirection == 'sw'){
			l = Math.max(mouse.x - visualHUD.application.canvasPosition.left, 0);
			w = Math.max(r - l, 1); //_position.top - mouse.y -  visualHUD.application.canvasPosition.top;
			
			if(w == 1){
				l = r - w;
			};

			
		};
		
		if(this.resizeDirection == 'e' || this.resizeDirection == 'ne' || this.resizeDirection == 'se'){
			w = mouse.x - _position.left - visualHUD.application.canvasPosition.left;
			w = mouse.x > visualHUD.application.canvasPosition.right ? visualHUD.application.canvasPosition.right - visualHUD.application.canvasPosition.left - _position.left : w;
		};
		if(this.resizeDirection == 's' || this.resizeDirection == 'se' || this.resizeDirection == 'sw'){
			h = mouse.y - _position.top -  visualHUD.application.canvasPosition.top;
			h = mouse.y > visualHUD.application.canvasPosition.bottom ? visualHUD.application.canvasPosition.bottom - visualHUD.application.canvasPosition.top - _position.top : h;
		};
		
		if(this.options.grid) {
			w -= w % this.options.grid;
			h -= h % this.options.grid;					
		};
		
		this.currentElement.css({ width: Math.max(w, 1), height:  Math.max(h, 1),top: t, left: l });
	},
	resizeBoxDrop: function(){
		var _data = this.currentElement.data('HUDItem');
		var size = {
			width: this.currentElement.width(),
			height: this.currentElement.height()
		};

		for(var k in size){
			var element = _data.form.get(0)[k];	
			if(element){
				element.value = size[k] = size[k] / visualHUD.scaleFactor;
				if(element.className.indexOf('range') != -1){					
					$(element).trigger('blur');
				};
			};
		};

		
		visualHUD.application.setupHudItem[_data.properties.itemType](this.currentElement, _data, size);
		

	},
	startMoveElement: function(event, element){
		this.currentElement.addClass('drag-start');
		this.slaveElements = [];
		this.offsets = [];
		this.drawLine = false;
		
		var masterElement;
		if(visualHUD.application.selectedItems.length > 1){
			for(var a = 0, b = visualHUD.application.selectedItems.length; a < b; a++){
				var isMatch = visualHUD.application.selectedItems[a].element.get(0) == this.currentElement.get(0);
				if(isMatch){
					masterElement = visualHUD.application.selectedItems[a].element;
				} else {
					this.slaveElements.push(visualHUD.application.selectedItems[a].element);
				};
			};
			var masterPosition = masterElement.position();

			for(a = 0, b = this.slaveElements.length; a < b; a++){
				var slavePosition = this.slaveElements[a].position();

				this.offsets.push({
					top: masterPosition.top - slavePosition.top,
					left: masterPosition.left - slavePosition.left
				});
			};
		};		
		
		this.mode = 'moveElement';
	},			
	moveElement: function(event, position, mouse){
		var newPosition = visualHUD.application.checkPosition(this.currentElement, position);
		this.currentElement.css(newPosition);	
		
		var pos;
		
		for(a = 0, b = this.slaveElements.length; a < b; a++){
			pos = visualHUD.application.checkPosition(this.slaveElements[a], {
				top: newPosition.top - this.offsets[a].top,
				left: newPosition.left - this.offsets[a].left
			});
			this.slaveElements[a].css(pos);
		};
	},
	moveElementDrop: function(){
		this.currentElement.removeClass('drag-start');
	}
}